<template>
  <!-- 服务机构 -->
  <div class="container" v-loading="loading">
    <div class="statusbar clearfix">
      <div class="w25 back" @click="fnBack()">
        <img src="../../assets/icon/back@2x.png" alt="">
        <span>返回</span>
      </div>
      <div class="w50 topcenter">
        <span>服务机构</span>
      </div>
      <div class="w25">
        <!-- <img src="../../assets/icon/back@2x.png" alt=""> -->
      </div>
    </div>
    <div class="search clearfix" style="margin-top: 3.33rem;">
      <div class="sear_input">
        <el-input size="small" clearable placeholder="请输入需要搜索的内容" prefix-icon="el-icon-search" v-model="searchs" @keyup.enter.native="fnSearch">
        </el-input>
      </div>
      <div class="btn">
        <button @click="fnSearch">搜索</button>
      </div>
    </div>
    <div class="switch_title switch_title2">
      <ul class="btns">
        <li v-bind:class="{ active: isActive==index }" :key="index" @click="fnSwitch(index,item.url,item.id)" v-for="(item,index) in threeNav">
          <span>{{item.displayName}}</span>
          <div v-bind:class="{ line: isActive==index }"></div>
        </li>
      </ul>
    </div>
    <div class="agency page-loadmore-wrapper">
      <mt-loadmore :bottomPullText='bottomPullText' :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
        <ul>
          <li class="clearfix contens" v-for='item in Articles' :key='item.id'>
            <!-- <router-link v-if='tyoe!=1' v-bind="{to:'/AgencyDetails/'+(item.id)}">
              <h3 class="namsd">名称：{{item.name}}</h3>
              <p class="time">地址：{{item.address}}</p>
              <p class="time">电话：{{item.tel}}</p>
            </router-link> -->
            <router-link v-bind="{to:'/AgencyDetails/'+(item.id)}">
              <img v-if='tyoe==1' src="../../assets/qwe.png">
              <img v-if='tyoe==0||tyoe==5' src="../../assets/zg.jpg">
              <img v-if='tyoe==2' src="../../assets/jicen.jpg">
              <div class="fl" style="width: 74%">
                <h3 class="namsd">名称：{{item.name}}</h3>
                <p class="time">成立时间：{{item.creationTime|yy}}</p>
                <p class="time">团队规模：{{item.memberCount}}</p>
                <p class="time">地址：{{item.address}}</p>
                <p class="time">电话：{{item.tel}}</p>
              </div>
            </router-link>
          </li>
        </ul>
      </mt-loadmore>
      <div class="page-footer" v-if="tip">到底了</div>
      <p class="page-footer" v-if="datalist">暂无数据</p>
    </div>

  </div>

</template>
<script>
import Api from "../../kites/api";
export default {
  name: "Agency",
  data() {
    return {
      datalist: false,
      tip: false,
      loading: false,
      isActive: 0, //1.法律援助  2.人民调解  3.特殊人群服务  4.公证服务
      searchs: "",
      id: "",
      threeNav: [],
      pages: 10,
      pageindex: 1,
      totalCount: "",
      Articles: [],
      page1: {
        height: ""
      },
      allLoaded: false,
      bottomPullText: "加载更多",
      tyoe: ""
    };
  },
  beforeRouteLeave(to, from, next) {
    if (to.name == "AgencyDetails") {
      from.meta.keepAlive = true;
    } else {
      from.meta.keepAlive = false;
    }
    next();
  },
  beforeCreate() {
    this.openIds();
  },
  mounted() {
    this.id = this.$route.params.id;
    console.log(this.id);
    this.GetServiceAgencies();
    this.GetMenuDetail();
  },
  created() {},
  methods: {
    //切换动态
    fnSwitch(indexs, type, id) {
      this.datalist = false;
      let tye = type.charAt(type.length - 1);
      this.tyoe = type.charAt(type.length - 1);
      this.isActive = indexs;
      this.GetMenuArticles(tye);
      this.allLoaded = false;
    },
    //搜索
    fnSearch() {
      this.pages = 10;
      this.pageindex = 1;
      this.totalCount = 0;
      this.loading = true;
      this.$post(Api.GetServiceAgencies, {
        type: this.id,
        filter: this.searchs,
        sorting: "",
        maxResultCount: this.pages,
        skipCount: this.pages * (this.pageindex - 1)
      }).then(res => {
        console.log(res);
        if (res.status == 200) {
          this.loading = false;
          this.totalCount = res.data.result.totalCount;
          this.Articles = res.data.result.items;
          if (this.totalCount == 0) {
            this.datalist = true;
            this.allLoaded = true;
          }
        } else {
          this.loading = false;
          this.$message.error(res.data.error);
        }
      });
    },
    //返回上一页
    fnBack() {
      this.$route.meta.keepAlive = false;
      //  	from.meta.keepAlive = false
      this.$store.commit("toggle", true);
      this.$router.push({
        name: "InfoQuery",
        params: {
          id: this.parentId
        }
      });
    },
    //获取上级
    GetMenuDetail() {
      this.$post(Api.GetMenuDetail, {
        id: this.id
      }).then(res => {
        console.log(res);
        if (res.data.success == true) {
          this.titles = res.data.result.displayName;
          this.parentId = res.data.result.parentId;
        } else {
          this.loading = false;
          this.$message.error(res.data.error);
        }
      });
    },
    //获取信息查询下的子菜单
    GetServiceAgencies() {
      this.loading = true;
      this.$post(Api.GetTopMenu, {
        parentId: this.id
      }).then(res => {
        console.log(res);
        if (res.status == 200) {
          this.loading = false;
          this.threeNav = res.data.result;
          let tye = this.threeNav[0].url.charAt(
            this.threeNav[0].url.length - 1
          );
          this.tyoe = tye;
          this.GetMenuArticles(tye);
        } else {
          this.loading = false;
          this.$message.error(res.data.error);
        }
      });
    },
    //获取文章列表
    GetMenuArticles(id) {
      this.tip = false;
      this.pages = 10;
      this.pageindex = 1;
      this.totalCount = 0;
      this.loading = true;
      this.id = id;
      this.$post(Api.GetServiceAgencies, {
        type: this.id,
        filter: this.searchs,
        sorting: "",
        maxResultCount: this.pages,
        skipCount: this.pages * (this.pageindex - 1)
      }).then(res => {
        console.log(res);
        if (res.status == 200) {
          this.loading = false;
          this.totalCount = res.data.result.totalCount;
          this.Articles = res.data.result.items;
          var bheight = $("body").height();
          var inHeigt = $(".search").outerHeight(true);
          var snHeigt = $(".switch_title").outerHeight(true);
          $(".agency").css("height", bheight - inHeigt - snHeigt + "px");
          if (this.totalCount == 0) {
            this.datalist = true;
            this.allLoaded = true;
          }
        } else {
          this.loading = false;
          this.$message.error(res.data.error);
        }
      });
    },
    //下拉加载
    loadBottom() {
      this.pageindex++;
      this.loading = true;
      this.$post(Api.GetServiceAgencies, {
        type: this.id,
        filter: this.searchs,
        sorting: "",
        maxResultCount: this.pages,
        skipCount: this.pages * (this.pageindex - 1)
      }).then(res => {
        console.log(res);
        if (res.status == 200) {
          this.loading = false;
          this.totalCount = res.data.result.totalCount;
          this.Articles = this.Articles.concat(res.data.result.items);
          //        this.allLoaded = true;// 若数据已全部获取完毕
          this.$refs.loadmore.onBottomLoaded();
          if (this.totalCount == this.Articles.length) {
            this.tip = true;
            this.allLoaded = true;
          }
        } else {
          this.loading = false;
          this.allLoaded = true; // 若数据已全部获取完毕
          this.$refs.loadmore.onBottomLoaded();
          this.$message.error(res.data.error);
        }
      });
    }
  }
};
</script>
<style scoped>
.page-loadmore-wrapper {
  overflow: scroll;
}
.agency {
  width: 100%;
  /* background-color: #ffffff; */
  box-sizing: border-box;
}
.mint-loadmore {
  width: 98%;
  margin: auto;
}
.content ul li {
  border-bottom: none;
}

.btns a {
  color: #000000;
}

.tip {
  line-height: 30px;
  background: #f1f1f1;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 200px;
}
.namsd {
  font-size: 16px;
  color: #333333;
  font-weight: 400;
}
.contens .time {
  color: #919191;
}
.contens {
  box-sizing: border-box;
  background: #fff;
  margin-bottom: 5px;
  padding: 10px;
  border-radius: 10px;
}
.contens  img{
  float: left; 
  width: 22%;
  margin-right: 10px;
}
.agency ul li .time {
  font-size: 1.1rem;
  color: #b4b5b5;
  text-align: left;
  margin-top: 0.8rem;
}
.page-footer {
  margin-top: 15px;
  padding-bottom: 15px;
}
</style>